<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="listpage.css">
		<link rel="stylesheet" href="./font/iconfont.css">
	</head>
	<body>
		<div class="top">
			<div class="top-up">
				<span class="iconfont icon-dianhua font1"></span>
				<p>国家/地区: 中国大陆<span class="iconfont icon-xiangxiajiantou"></span></p>
				<img src="./img/2.png" alt="" class="fendi">
				<div class="top-right">
					<a href="#">FENDI与我</a>
					<a href="personcenter.html">我的订单</a>
					<span class="iconfont icon-sousuo font2"></span>
					<span class="iconfont icon-nanzhuang font3"></span>
				</div>
			</div>
			<div class="nav">
				<ul>
					<li>女士
						<div class="menu1">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					</li>
					<li>男士

						<div class="menu2">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					<li>童装
						<div class="menu3">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					</li>
					<li>婚礼灵感
						<div class="menu4">
							<div class="menu4-dl">
								<dl>
									<dt>她的礼物</dt>
									<dd><img src="./img/5.jpg" alt=""></dd>
									<dd><a href="#" class="check">查看全部</a></dd>
									<dd><a href="#">Fendi x Chaos</a></dd>
									<dd><a href="#">春夏系列2021</a></dd>
									<dd><a href="#">Fendi Peekaboo</a></dd>
									<dd><a href="#">Fendi Baguette</a></dd>
								</dl>
								<dl>
									<dt>他的礼物</dt>
									<dd><img src="./img/4.jpg" alt=""></dd>
									<dd><a href="#" class="check">查看全部</a></dd>
									<dd><a href="#">Peekaboo</a></dd>
									<dd><a href="#">Baguette</a></dd>
									<dd><a href="#">单肩包</a></dd>
									<dd><a href="#">手提包</a></dd>
								</dl>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="main">
			<ul>
				<li>尺码<span class="iconfont icon-xiangxiajiantou"></span></li>
				<li>颜色<span class="iconfont icon-xiangxiajiantou"></span></li>
				<li>材质<span class="iconfont icon-xiangxiajiantou"></span></li>
			</ul>
			<i>排序方式:默认<span class="iconfont icon-xiangxiajiantou"></span></i>
		</div>
		<div class="content">
			<ul id="lilist">
				<li id="template">
					<a href=""><img src="" alt=""></a>
					<h6></h6>
					<p></p>
					<span></span>
				</li>
		</div>
		<div class="message">
			<p>订阅我们的新闻资讯</p>
			<p>要获得更多个性化内容，包括访问您所在地区的特殊活动和最新消息，请提供一下详细信息</p>
			<p>手机号码*</p>
			<b></b>
		</div>
		<div class="footer">
			<dl>
				<dt>客服关怀</dt>
				<dd>联系我们</dd>
				<dd>常见问题与解答</dd>
				<dd>订单与配送</dd>
				<dd>退货与退款</dd>
				<dd>追踪您的订单</dd>
			</dl>
			<dl>
				<dt>FENDI与我</dt>
				<dd>登录/注册</dd>
			</dl>
			<dl>
				<dt>企业</dt>
				<dd>寻找精品店</dd>
				<dd>Fendi Private Suites</dd>
				<dd>可持续性</dd>
				<dd>供应链透明化</dd>
			</dl>
			<dl>
				<dt>FENDI ROMA</dt>
				<dd>关于FENDI</dd>
				<dd>Fendi的历史</dd>
				<dd>量身定做</dd>
				<dd>皮草工坊</dd>
				<dd>家居</dd>
				<dd>Fendi Boutique Hotel</dd>
				<dd>腕表</dd>
			</dl>
			<dl>
				<dt>法律咨询</dt>
				<dd>隐私条款</dd>
				<dd>销售条款与条件</dd>
				<dd>网站使用条款</dd>
				<dd>行为准则</dd>
			</dl>
			<dl>
				<dt>FENDI ROMA</dt>
				<dd>
					<span class="iconfont icon-gongzhonghao"></span>
					<span class="iconfont icon-tubiao214"></span>
				</dd>
			</dl>
		</div>
		<div class="finally">
			<p>国家/地区: 中国大陆<span class="iconfont icon-xiangxiajiantou"></span></p>
			<span>@FENDI-保留所有权</span>
			<span>沪ICP备1301824号-1</span>
			<span>沪公网安备31010602001819号</span>
			<span>上海工商</span>
		</div>
		<script type="text/javascript" src="./jquery.min.js"></script>
		<script>
			let template = $("#template");
			let hover = $(".hover");
			//向后端发送ajax请求
			let http = new XMLHttpRequest();
			http.open("get", "http://127.0.0.1:81/getlist");
			http.send();
			http.onreadystatechange = function() {
				if (http.readyState === 4) {
					let data = JSON.parse(http.responseText);
					data.forEach(item => {
						//克隆li
						let ul=$("#lilist")
						let newtemplate = template.clone(true);
						newtemplate.attr("id", "");
						newtemplate.find("img").attr("src", item.img)
						newtemplate.find("h6").html(item.title);
						newtemplate.find("p").html(item.details);
						newtemplate.find("span").html(item.price);
						newtemplate.find("a").attr("href",`detailpage.html?id=${item.id}`);
						newtemplate.appendTo(ul);
					})
					let lilist = $(".content li")
					// console.log(hoverlist)
					for (let i = 0; i < lilist.length; i++) {
						lilist[i].onmouseenter= function(){
							// console.log(this1)
							$(this).find("img").css({
								border:"1px solid #fdf406",
								transform:"scale(1.1)",
								transition:"1.5s"
							})
						}
						lilist[i].onmouseleave= function(){
							// console.log(this1)
							$(this).find("img").css({
								border:"none",
								transform:"scale(1)",
								transition:"1.5s"
							})
						}
					}
					
					
				}
			}
		
			
		</script>

	</body>
</html>
